<template>
  <el-dialog
      :model-value="visible"
      width="700px"
      title="日志详情"
      @close="handleClose"
      :destroy-on-close="true"
  >
    <div class="log-detail-container">
      <!-- 基础信息 -->
      <div class="section">
        <div class="section-title">基础信息</div>

        <div class="info-row">
          <span class="label">类型:</span>
          <DictSelect
              :model-value="row.type"
              dicTypeCode="log_type"
              displayOnly
              class="full-width"
          />
        </div>

        <div class="info-row">
          <span class="label">处理人:</span>
          <TableDictSelect
              v-model="row.handler"
              table-name="app_user"
              label-field="nickName"
              value-field="userId"
              displayOnly
              class="full-width"
          />
        </div>

        <div class="info-row">
          <span class="label">方法:</span>
          <span class="value">{{ row.method }}</span>
        </div>

        <div class="info-row">
          <span class="label">耗时(ms):</span>
          <span class="value">{{ row.duration }}</span>
        </div>

        <div class="info-row">
          <span class="label">描述:</span>
          <span class="value">{{ row.description }}</span>
        </div>
      </div>

      <!-- 时间信息 -->
      <div class="section">
        <div class="section-title">时间信息</div>

        <div class="info-row">
          <span class="label">开始时间:</span>
          <span class="value">{{ formatDate(row.startTime) }}</span>
        </div>

        <div class="info-row">
          <span class="label">结束时间:</span>
          <span class="value">{{ formatDate(row.endTime) }}</span>
        </div>
      </div>

      <!-- 参数与结果 -->
      <div class="section">
        <div class="section-title">参数与结果</div>

        <div class="json-block">
          <div class="json-title">输入参数</div>
          <pre>{{ formatJson(row.input) }}</pre>
        </div>

        <div class="json-block">
          <div class="json-title">输出结果</div>
          <pre>{{ formatJson(row.output) }}</pre>
        </div>

        <div v-if="row.error" class="json-block">
          <div class="json-title">错误信息</div>
          <pre>{{ row.error }}</pre>
        </div>
      </div>
    </div>

    <template #footer>
      <el-button @click="handleClose" type="primary">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TableDictSelect from '@/components/TableDictSelect.vue'
import DictSelect from '@/components/DictSelect.vue'
import type { LogItem } from '@/types/api'

const row = ref<LogItem>({
  type: '',
  handler: '',
  method: '',
  description: '',
  input: '',
  output: '',
  error: '',
  startTime: new Date(),
  endTime: new Date(),
  duration: 0
})

const visible = ref(false)

const openDialog = (data: LogItem) => {
  row.value = { ...data }
  visible.value = true
}

const handleClose = () => {
  visible.value = false
}

const formatDate = (date: Date) => {
  if (!date) return ''
  const d = new Date(date)
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  const h = String(d.getHours()).padStart(2, '0')
  const min = String(d.getMinutes()).padStart(2, '0')
  const s = String(d.getSeconds()).padStart(2, '0')
  return `${y}-${m}-${day} ${h}:${min}:${s}`
}

const formatJson = (str: string) => {
  try {
    const obj = JSON.parse(str)
    return JSON.stringify(obj, null, 2)
  } catch (e) {
    return str
  }
}

defineExpose({ openDialog })
</script>

<style scoped>
.log-detail-container {
  max-height: 75vh;
  overflow-y: auto;
  padding-right: 10px;
}

/* 每个区域的样式 */
.section {
  margin-bottom: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
}

.section-title {
  font-weight: 600;
  font-size: 16px;
  color: #409eff;
  margin-bottom: 10px;
}

/* 每行信息布局 */
.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: nowrap; /* 禁止换行 */
}

.label {
  width: 120px;
  font-weight: 600;
  color: #606266;
  flex-shrink: 0;
}

.value {
  flex: 1;
  color: #303133;
  min-width: 0; /* 防止文字溢出换行 */
}

/* 选择组件占满剩余宽度 */
.full-width {
  flex: 1;
  min-width: 0;
}

/* JSON 区块 */
.json-block {
  margin-bottom: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 10px;
  overflow-x: auto;
}

.json-title {
  font-weight: 600;
  color: #606266;
  margin-bottom: 5px;
}

pre {
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>